export default {
  data () {
    return {
      personMonitorEchart: null,
      personMonitorInterval: null,
      personMonitorObj: {},
      personMonitorList: [],
      personMonitorMap: new Map(),
      personMonitorxAxisMap: new Map(),
      personMonitorData: [],
      personMonitorxAxis: [],
      personMonitorIndex: 0,
      isDownThirtyPercent: 1,
      differNum: 0,
      personRecentOption: {
        color: ['#3398DB'],
        tooltip: {
          padding: [3, 10],
          formatter: (params) => {
            const worker = this.personMonitorMap.get(params.name)
            let tooltipHtml = ''
            worker.forEach(item => {
              tooltipHtml += `<p style="font-size: 12px; width: 80px;height: 22px"><span style="float: left; color: #a9c5ec;">${item.professionName}</span><span style="float: right; color: #fff">${item.totalNum}</span></p>`
            })
            return tooltipHtml
          },
          position: (point, params) => {
            if (params.dataIndex >= 5) {
              return [point[0] - 114, '14%']
            } else {
              return [point[0] + 14, '14%']
            }
          },
          backgroundColor: 'rgba(9, 37, 56, 0.5)',
          extraCssText: 'box-shadow: 0 0 5px 2px rgba(8, 69, 69) inset;'
        },
        grid: {
          left: 0,
          top: '15%',
          right: 0,
          bottom: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            name: 'time',
            boundaryGap: true,
            data: [],
            axisLabel: {
              color: '#a8c5ed'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#214a60',
                width: 2
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#a8c5ed'
              }
            }
          },
          {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLabel: {
              color: '#a8c5ed'
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#a8c5ed'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '人数',
            nameTextStyle: {
              color: '#a8c5ed'
            },
            minInterval: 1,
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#a8c5ed'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#214a60',
                width: 2
              }
            },
            splitLine: {
              lineStyle: {
                color: '#214052'
              }
            }
          }
        ],
        series: [
          {
            name: '背景',
            type: 'line',
            xAxisIndex: 1,
            silent: true,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(8, 59, 81, 0)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(8, 59, 81, 0.8)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
            },
            lineStyle: {
              opacity: 0
            },
            itemStyle: {
              color: '#2582fb',
              opacity: 0
            },
            data: [200, 200, 200, 200, 200, 200, 200, 200]
          },
          {
            name: 'worker',
            type: 'bar',
            barWidth: '25%',
            data: [],
            emphasis: {
              label: {
                show: true,
                position: 'top',
                color: '#fff',
                fontSize: 14
              }
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#1fa8f8'},
                    {offset: 1, color: 'rgba(31, 168, 248, 0)'}
                  ]
                )
              }
            }
          }
        ]
      }
    }
  },
  methods: {
    setAttendanceTotalData () {
      this.personMonitorData = []
      this.personMonitorxAxis = []
      for (let i = 0; i < 7; i++) {
        let time = this.$moment().subtract(i, 'days').format('MM-DD')
        this.personMonitorxAxis.unshift({
          value: time,
          textStyle: {color: '#a8c5ed'}
        })
      }
      this.personMonitorxAxis.forEach(item => {
        this.personMonitorxAxisMap.set(item.value, {})
      })
      for (let item in this.personMonitorObj) {
        let allWorker = 0
        this.personMonitorObj[item].forEach(el => {
          allWorker += el.totalNum
        })
        this.personMonitorMap.set(item, this.personMonitorObj[item])
        this.personMonitorxAxisMap.set(item, {
          name: item,
          value: allWorker,
          label: {
            show: false,
            position: 'top',
            color: '#fff',
            fontSize: 14
          }
        })
      }
      this.personMonitorData = [...this.personMonitorxAxisMap.values()]
      this.getAttendanceCompare().then(() => {
        // 是否显示同比下降
        if (this.isDownThirtyPercent) {
          let lastNu = this.personMonitorData[this.personMonitorData.length - 1].value
          this.personRecentOption.series[1].markPoint = {
            symbolSize: 1,
            symbolOffset: [0, '50%'],
            label: {
              formatter: (params) => {
                return `{a|今日进场人}\n{a|数同比昨日}\n{b|下降}{c|${params.name}}{b|人}`
              },
              backgroundColor: 'rgba(9, 37, 56, 0.5)',
              color: '#a8c5ed',
              borderRadius: 4,
              borderWidth: 1,
              borderColor: 'auto',
              padding: [5, 10],
              position: 'right',
              distance: 15,
              rich: {
                a: {
                  lineHeight: 20,
                  color: '#a8c5ed'
                },
                b: {
                  lineHeight: 20,
                  color: '#a8c5ed'
                },
                c: {
                  fontSize: 16,
                  color: '#fff'
                }
              }
            },
            data: [
              {coord: [5, lastNu], name: this.differNum}
            ]
          }
        }
        this.initPersonRecent()
      })
    },
    compare (property) {
      return function (a, b) {
        const value1 = Number.parseInt(a[property].replace(/-/g, ''))
        const value2 = Number.parseInt(b[property].replace(/-/g, ''))
        return value1 - value2
      }
    },
    getAttendanceCompare () {
      return new Promise(resolve => {
        const data = {
          'stageId': this.currentUser.stageId
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/screen/getAttendanceCompare`,
          data: this.$qs.stringify(data, {indices: false})
        }).then(res => {
          this.isDownThirtyPercent = res.data.data.isDownThirtyPercent
          this.differNum = res.data.data.differNum
          resolve()
        })
      })
    },
    initPersonRecent () {
      let allWorkerList = this.personMonitorData.map(item => item.value)
      let workerMax = Math.max(...allWorkerList)
      let workerBgList = []
      for (let i = 0; i < 7; i++) {
        workerBgList.push(workerMax / 2)
      }
      const ref = this.personData[this.currentIndex].ref
      this.personRecentOption.series[0].data = workerBgList
      this.personRecentOption.series[1].data = this.personMonitorData
      this.personRecentOption.xAxis[0].data = this.personMonitorxAxis
      if (this.personMonitorEchart) {
        this.personMonitorEchart = null
        this.$echarts.dispose(this.$refs[ref][0])
        window.clearInterval(this.personMonitorInterval)
        this.personMonitorInterval = null
      }
      this.personMonitorEchart = this.$echarts.init(this.$refs[ref][0])
      this.personMonitorEchart.setOption(this.personRecentOption)
      this.setHoverPorsonMonitor()
      this.initPersonMonitorInterval()
      this.personMonitorEchart.on('mouseover', (params) => {
        this.personMonitorIndex = params.dataIndex
        this.setHoverPorsonMonitor()
        window.clearInterval(this.personMonitorInterval)
        this.personMonitorInterval = null
      })
      this.personMonitorEchart.on('mouseout', (params) => {
        this.initPersonMonitorInterval()
      })
    },
    initPersonMonitorInterval () {
      if (!this.personMonitorInterval) {
        this.personMonitorInterval = setInterval(() => {
          this.setHoverPorsonMonitor()
        }, 1000 * 5)
      }
    },
    setHoverPorsonMonitor () {
      if (this.personMonitorIndex >= 7) {
        this.personMonitorIndex = 0
      }
      this.personMonitorData.forEach(item => {
        item.label.show = false
      })
      this.personMonitorxAxis.forEach(item => {
        item.textStyle.color = '#a8c5ed'
      })
      this.personMonitorxAxis[this.personMonitorIndex].textStyle.color = '#01b1f5'
      this.personMonitorData[this.personMonitorIndex].label.show = true
      this.personMonitorEchart.setOption({
        xAxis: [
          {
            name: 'time',
            data: this.personMonitorxAxis
          }
        ],
        series: [
          {
            name: 'worker',
            data: this.personMonitorData
          }
        ]
      })
      if (this.personMonitorDataTimeout) {
        window.clearTimeout(this.personMonitorDataTimeout)
        this.personMonitorDataTimeout = null
        this.personMonitorDataTimeout = setTimeout(() => {
          if (this.personMonitorData[this.personMonitorIndex]) {
            this.personMonitorEchart.dispatchAction({type: 'showTip', seriesIndex: 1, name: this.personMonitorData[this.personMonitorIndex].name})
          }
          this.personMonitorIndex++
        }, 500)
      }
    }
  }
}
